<template>
  <div class="count-down">
    <div class="number h w-21">
      {{ formattingTime.date[0] }}
    </div>
    <div class="colon">:</div>
    <div class="number m w-21">
      {{ formattingTime.date[1] }}
    </div>
    <div class="colon">:</div>
    <div class="number s w-21">
      {{ formattingTime.date[2] }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['formattingTime', 'countdownText'],
}
</script>

<style scoped lang="less">
.count-down {
  display: flex;
}

.number {
  width: 28px;
  height: 32px;
  line-height: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #eaf4ff 100%);
  border-radius: 4px;
  color: #4E4294;
  font-family: 'DS-Digital';
  font-size: 20px;
  font-weight: 700;
}

.colon {
  line-height: 32px;
  font-family: 'DS-Digital';
  font-size: 20px;
  font-weight: 700;
  margin: 0 2px;
}
</style>
